<template>

	<div class="index pgroot" ref='index'>

		<header>
			<div class="htop">
				<div class="address"><i class="fa fa-map-marker"></i> &nbsp;黄浦区人民大道上海市政府上海市委</div><i class="fa fa-caret-down down"></i>
				<div class="weath">
					<p>
						{{weather.temperature}}°<br /> {{weather.description}}
					</p>
					<img :src="wImgsrc" />
				</div>
			</div>

			<input class="search" type="search" placeholder="搜索商家、商品" />
			<div class="tip">
				<a v-for="gds in goods" href="gds.link">{{gds.search_word}}</a>
			</div>
		</header>

		<div v-if="status=='success'" class="banner">
			<swiper auto height="250px" dots-position="center">
				<swiper-item class="black">
					<ban v-for="fo in foods1" :fo="fo"></ban>
				</swiper-item>
				<swiper-item class="black">
					<ban v-for="fo in foods2" :fo="fo"></ban>
				</swiper-item>
			</swiper>
		</div>
		<main>
			<!-- 推荐商家 -->
			<div class="recom">
				<p class="retit">推荐商家</p>
				<div v-if="status=='success'">
					<router-link v-for="shop in sell" :to="'/shop/'+shop.id">
						<seller :shop="shop"></seller>
					</router-link>
					<p class="loading-icon">
						<i class="fa fa-refresh fa-spin"></i>
					</p>
				</div>
			</div>
			<!--回到顶部 -->
			<div v-show='isTop' class="backTop" @click="backTop">
				<i class="fa fa-arrow-up"></i>
			</div>
		</main>
		<div v-if="status=='loading'" style="text-align: center;margin-top: 50px;">
			<img src="../../static/img/loading.gif" />
		</div>

	</div>

</template>

<script>
	import { Search, Swiper, SwiperItem, Scroller } from 'vux'
	import ban from '../components/banner'
	import seller from '../components/seller'

	export default {
		name: 'index',
		components: {
			Search,
			Swiper,
			SwiperItem,
			Scroller,
			ban,
			seller
		},
		data: function() {
			return {
				isTop:false,
				status: 'loading',
				isLoadingMore: true,
				// 当前高度
				currenH: '',
				weather: '',
				wImgsrc: '',
				goods: [],
				foods1: [],
				foods2: [],
				sell: [],
			}
		},
		methods: {
			req() {
				// 天气请求
				this.$http.get('/ele/bgs/weather/current?', {
						params: { latitude: 31.23037, longitude: 121.473701 }
					})
					.then(function(res) {
						this.status = "success";
						var arr = res.data.image_hash.split('')
						arr.splice(3, 0, '/');
						arr.splice(1, 0, "/");
						var str = arr.join("");
						this.weather = res.data;
						this.wImgsrc = '//fuss10.elemecdn.com/' + str + '.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';

					}.bind(this), function(err) {
						this.status = 'fail'
					}.bind(this))

				// 搜索下的提示
				this.$http.get("/ele/shopping/v3/hot_search_words?", {
						params: { latitude: 31.23037, longitude: 121.473701 }
					})
					.then(function(res) {

						this.status = "success";
						this.goods = res.data;

					}.bind(this), function(err) {
						this.status = 'fail'
					}.bind(this))

				//  轮播图
				this.$http.get("/ele/v2/index_entry?geohash=ww0vs62txh7vv&group_type=1&flags[]=F")
					.then(function(res) {

						this.status = "success";
						this.foods1 = res.data.slice(0, 8);
						this.foods2 = res.data.slice(8);

					}.bind(this), function(err) {
						this.status = 'fail'
					}.bind(this))

				// 商家详情
				this.$http.get("/ele/shopping/restaurants?offset=0&limit=20&extras[]=activities&terminal=h5", {
						params: { latitude: 31.23037, longitude: 121.473701 }
					})
					.then(function(res) {

						this.status = "success";
						this.sell = res.data;

					}.bind(this), function(err) {
						this.status = 'fail'
					}.bind(this))
			},
			loadMore() {
				this.isLoadingMore = false;

				this.$http.get("/ele/shopping/restaurants?extras[]=activities&terminal=h5", {
						params: {
							latitude: 31.23037,
							longitude: 121.473701,
							offset: this.sell.length,
							limit: 20
						}
					})
					.then(function(res) {
						this.status = "success";
						this.sell = this.sell.concat(res.data);

						this.isLoadingMore = true;

					}.bind(this), function(err) {
						this.status = 'fail'
						this.isLoadingMore = true;
					}.bind(this))
			},
			backTop(){
				this.$el.scrollTop=0;
			}
		},
		created() {
			this.req();

		},
		mounted() {
			this.$el.onscroll = function(e) {
				// 屏幕高度
				var windowH = e.target.clientHeight;
				//滚动偏移量
				var scrollTop = e.target.scrollTop;
				this.currenH = scrollTop;
				// 页面滚动高度
				var contentH = e.target.scrollHeight;
				
				if(scrollTop>windowH+100){
					this.isTop=true;
				}else{
					this.isTop=false;		
				}

				if(windowH + scrollTop > contentH - 10) {
//					console.log("要请求更多了");
					if(this.isLoadingMore) {
						this.loadMore();
					}
				}

			}.bind(this)
		},
		activated() {
			this.$el.scrollTop = this.currenH;
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.index {
		background: #F4F4F4;
		position: relative;
	}
	
	header {
		background: #0096FF;
		color: white;
		padding: 0.5rem;
		font-size: 0.7rem;
	}
	
	.htop {
		padding: 5px 0 10px;
		overflow: hidden;
	}
	
	.down {
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	
	.address {
		float: left;
		width: 60%;
		overflow: hidden;
		text-overflow: clip;
		white-space: nowrap;
		padding-top: 5px;
		font-size: 1.1rem;
	}
	
	.weath {
		width: 20%;
		font-size: 0.5rem;
		float: right;
		margin: -2px 0 0 0;
		text-align: right;
	}
	
	.weath p {
		display: inline-block;
		margin: 0;
	}
	
	.weath img {
		margin-left: 0.1rem;
		width: 0.8rem;
		height: 0.8rem;
	}
	
	.search {
		font-size: 0.6rem;
		text-align: center;
		padding: 8px;
		width: 100%;
		border-radius: 25px;
		outline: none;
		box-shadow: none;
		border: none;
	}
	
	.tip {
		font-size: 0.5rem;
		padding: 15px 5px;
		white-space: nowrap;
		overflow-x: scroll;
	}
	
	.tip a {
		padding: 0 10px;
		color: white;
	}
	
	.banner {
		background: #fff;
	}
	
	main {
		background: #fff;
		margin-top: 10px;
	}
	
	.retit {
		margin: 0;
		padding: 10px;
		font-weight: bold;
	}
	
	.backTop {
		position: fixed;
		width: 2rem;
		height: 2rem;
		right: 20px;
		bottom: 100px;
		background: rgba(244,244,244,.8);
		z-index: 10;
		text-align: center;
		color: #E0E0E0;
		border-radius: 50%;
		cursor: pointer;
	}
	
	.backTop i {
		line-height: 2rem;
	}
</style>